<template>

    <el-row :gutter="20">
        <el-col :span="20" :xs="24">
        
            <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
               <el-form-item label="单据编号" prop="djbh">
                  <el-input
                     v-model="queryParams.djbh"
                     placeholder="请输入单据编号"
                     clearable
                     style="width: 240px"
                     @keyup.enter="handleQuery"
                  />
               </el-form-item>
               <el-form-item label="单据日期" style="width: 308px;">
                  <el-date-picker
                     v-model="dateRange"
                     value-format="YYYY-MM-DD"
                     type="daterange"
                     range-separator="-"
                     start-placeholder="开始日期"
                     end-placeholder="结束日期"
                  ></el-date-picker>
               </el-form-item>
               <el-form-item>
                  <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                  <el-button icon="Refresh" @click="resetQuery">重置</el-button>
               </el-form-item>
            </el-form>

            <el-row :gutter="10" class="mb8">
               <el-col :span="1.5">
                  <el-button
                     type="primary"
                     plain
                     icon="Plus"
                     @click="handleAdd"
                     v-hasPermi="['system:user:add']"
                  >新增</el-button>
               </el-col>
               <el-col :span="1.5">
                  <el-button
                     type="success"
                     plain
                     icon="Edit"
                     :disabled="single"
                     @click="handleUpdate"
                     v-hasPermi="['system:user:edit']"
                  >修改</el-button>
               </el-col>
               <el-col :span="1.5">
                  <el-button
                     type="danger"
                     plain
                     icon="Delete"
                     :disabled="multiple"
                     @click="handleDelete"
                     v-hasPermi="['system:user:remove']"
                  >删除</el-button>
               </el-col>
               <el-col :span="1.5">
                  <el-button
                     type="info"
                     plain
                     icon="Upload"
                     @click="handleImport"
                     v-hasPermi="['system:user:import']"
                  >导入</el-button>
               </el-col>
               <el-col :span="1.5">
                  <el-button
                     type="warning"
                     plain
                     icon="Download"
                     @click="handleExport"
                     v-hasPermi="['system:user:export']"
                  >导出</el-button>
               </el-col>
               <right-toolbar v-model:showSearch="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
            </el-row>
        
        </el-col>
    </el-row>



    <el-table v-loading="loading" :data="getsaleorderlist" @selection-change="handleSelectionChange" @cell-click="cellClick" :cell-style="cellStyle">
        <el-table-column type="selection" width="50" align="center" />
        <el-table-column label="单据编号" align="center" prop="djbh"/>
        <el-table-column label="单位名称" align="center" prop="dwmc"
            :show-overflow-tooltip="true" />
        <el-table-column label="单位地址" align="center" prop="dwdz"
            :show-overflow-tooltip="true" />
        <el-table-column label="批号" align="center" prop="pihao"
            :show-overflow-tooltip="true" />
        <el-table-column label="日期" align="center" prop="rq"
            width="120" />
        <el-table-column label="数量" align="center" prop="shl"
            width="120" />
        <!-- <el-table-column label="状态" align="center">
            <template #default="scope">
                <el-switch v-model="scope.row.status" active-value="0" inactive-value="1"
                    @change="handleStatusChange(scope.row)"></el-switch>
            </template>
        </el-table-column>
        <el-table-column label="创建时间" align="center" prop="createTime">
            <template #default="scope">
                <span>{{ parseTime(scope.row.createTime) }}</span>
            </template>
        </el-table-column> -->
        <!-- <el-table-column label="操作" align="center" width="150" class-name="small-padding fixed-width"> -->
            <!-- <template #default="scope">
                <el-tooltip content="修改" placement="top" v-if="scope.row.userId !== 1">
                    <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"
                        v-hasPermi="['system:user:edit']"></el-button>
                </el-tooltip>
                <el-tooltip content="删除" placement="top" v-if="scope.row.userId !== 1">
                    <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"
                        v-hasPermi="['system:user:remove']"></el-button>
                </el-tooltip>
                <el-tooltip content="重置密码" placement="top" v-if="scope.row.userId !== 1">
                    <el-button link type="primary" icon="Key" @click="handleResetPwd(scope.row)"
                        v-hasPermi="['system:user:resetPwd']"></el-button>
                </el-tooltip>
                <el-tooltip content="分配角色" placement="top" v-if="scope.row.userId !== 1">
                    <el-button link type="primary" icon="CircleCheck" @click="handleAuthRole(scope.row)"
                        v-hasPermi="['system:user:edit']"></el-button>
                </el-tooltip>
            </template> -->
        <!-- </el-table-column> -->
    </el-table>
    <!-- <el-pagination
        small
        background
        layout="prev, pager, next"
        class="mt-4"
        :total="total"
        :page-sizes="[10, 20, 30, 40, 50, 100]"
  /> -->
  <pagination
               v-show="total > 0"
               :total="total"
               v-model:page="queryParams.pageNum"
               v-model:limit="queryParams.pageSize"
               @pagination="getsaleorder"
            />
</template>

<script setup>
import { ref,reactive,toRefs, onMounted} from 'vue';
import {listsaleorder,getlistbydjbh} from "~/api/system/saleorder/saleorder.js";
import {getCurrentInstance} from "vue";


//组件中导入对应状态管理工具
import useyhxxStore from '~/store/modules/yhxx.js'
const store = useyhxxStore();


// const data = reactive({
//   queryParams: {
//     pageNum: 1,
//     pageSize: 10,
//     userName: undefined,
//     phonenumber: undefined,
//     status: undefined,
//     deptId: undefined
//   },
// });

// const { queryParams} = toRefs(data);
const loading = ref(true);
const userList = ref([]);
const getsaleorderlist = ref([]);
const currentValue = ref('')
const currentBgc = reactive({})
const total = ref(0);
const { proxy } = getCurrentInstance();
const dateRange = ref([]);
const showSearch = ref(true);
const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 20,
    djbh: '',
  },
});

const { queryParams} = toRefs(data);


/** 查询用户列表 */
function getList() {
  loading.value = true;
  listsaleorder().then(res => {
    loading.value = false;
    userList.value = res; 
    total.value=userList.value.length
  });
};

function getsaleorder() {
  loading.value = true;
  getlistbydjbh(proxy.addDateRange(queryParams.value, dateRange.value)).then(res => {
    loading.value = false;
    getsaleorderlist.value = res.rows;
    total.value=res.total
  });
};

/** 选择条数  */
function handleSelectionChange(selection) {
    const saleorderid = selection.map(item => item.id);
//   single.value = selection.length != 1;
//   multiple.value = !selection.length;
};

//单元格点击
const cellClick = (row, column)=>{
  currentValue.value = `${row.id}_${column.property}`
}
//单元格的 style 的回调方法
const cellStyle = ({row, column})=>({
  'border':`${row.id}_${column.property}`===currentValue.value?'2px solid #000':'',
  'backgroundColor':currentBgc[`${row.id}_${column.property}`]||''
})

// //分页功能实习
// const changePage = reactive({
//   currentPage: 1,
//   total: userList.value.length + 1 / 9,
// });
 
// //获取当前页数
// const handelCurrentChange = (value) => {
// //获取当前页码
//   changePage.currentPage = value; 
// //判断当前页是否为首页 页码从1开始，是则直接调用后端数据，否则要进行计算
//   if (value > 1) {
//     var i = (value - 1) * 10;  //计算当前页第一条数据的下标，
//     var arry = [];  //建立一个临时数组
//     //比如每页10条数据，第二页的第一条数据就是从 （2-1）*10 = 10 开始的 结束下标就是2*10=20 
//     while (i < value * 10) {
//      //解决最后一页出现null值
//       if (userList.value.length[i] != null) {
//         arry.push(userList.value.length[i]);
//         i++;
//         continue
//       }
//       break
//     }
//     userList.value=arry
 
//    } else {
//     userList.value = userList.value.length;
//   }
// };
// getList()
/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getsaleorder();
};
getsaleorder()
</script>

<style scoped>

</style>